<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Chat</title>
	<link rel="stylesheet" href="css/index.css" />
	<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/axios.min.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
	<div id="main">
		<div class="main-left">
		<!-- 用户列表 -->
			<div class="myinfo">
				<!-- 我的个人信息 -->
				<img :src="myuidimg"/>
				<div class="myinfo-all">
					<div class="myinfo-user"><h2 v-html="myuid">MyUserName</h2><tt v-html="myqqnum">MyQQNum</tt></div>
					<div class="MyStatic"><b>🌏 在线</b></div>
					
				</div>
			</div>
			<div class="so-chat">
				<!-- 搜索聊天 -->
				<form>
				<li class="so-li-input"><input type="text" placeholder="搜索UID/用户名/聊天记录" id="souser" /></li>
				<li class="so-li-get"><input type="image" src="./img/so.png"/></li>
				</form>
			</div>
			<div class="chat-list" @click="handleClick" v-html="chatlist" >
				<div id="chat1"><img src=''/><div class="chat-user-info"><h3>UserName</h3><div class="chat-user-msg-ps"> <li>[UserName]ChatInfoMsg</li> <li>ChatTime</li></div></div></div>
			</div>
		</div>
		<div class="main-right">
		<!-- 聊天页面 -->
			<div class="chat-title">
				<!-- 聊天对象名称 -->
				<h1 v-html="nowchatid">ChatUserName</h1>
				
			</div>
			<div class="chat-msg-all">
				<div class="chatmainall">
					<div class="chatmain" ref="chatmain" v-html="nowchat"> </div>
					<div id="maodian"></div>
				</div>
				<div class="chat-input">
					<!-- 聊天消息发送模块 -->
					<div class="chat-input-other">
						<li><img src="./img/emoji.png"/><!-- 表情 --></li>
						<li><img src="./img/image.png"/><!-- 图片 --></li>
						<li><img src="./img/file.png"/><!-- 文件 --></li>
						<li><img src="./img/mp4.png"/><!-- 视频 --></li>
						<li><img src="./img/mp3.png"/><!-- 音乐 --></li>
						<li><img src="./img/other.png"/><!-- 其他/链接 --></li>
						
					</div>
					<div class="chat-input-text">
						
						<div>
							<li><textarea v-model="infomsg" placeholder="消息内容" id="chatinput" @keyup.enter="postchatinfo"></textarea></li>
							<li><button  @click="postchatinfo" >发送</button></li>
						</div>
					</div>
				</div>
			</div>
			<audio style="display: none;" ref="messageSound" src="./style/file/new.mp3" @ended="onSoundEnded" autoplay playsinline></audio>
		</div>
	</div>
</div>
<script>
const App = {
	data() {
		return {
			chatid:'',myuid:'888',chatinfo:[],newtime:'',chatlist:'',
			chattitle:'BiaoGe',infomsg:'',nowchat:'',nowchatid:'888',
			myuidimg:'',myqqnum:'2744615315',isPlaying: false, 
		}
	},
	methods: {
	    main:function(){
			var that = this;
			this.chatlist = '';
			var mychaturl = "./api/"+this.myuid+".json";
			axios.get(mychaturl,{}).then(function(resp) {
			    var data = resp.data;
			    if(data){
					if(data=="{}") {// 无消息
					}else if(data.static=='400') alert(data.msg);
					else{
						that.playMessageSound(); 
						Object.values(data).forEach(value => {
							that.newchat(value);
							//当前会话为空，以第一条为准
							if(!that.nowchatid || that.nowchatid==that.myuid) that.nowchatid = value;
							that.chatinfo[value]='';
						});
					}
			    }else alert("服务器请求错误！");
			});
		},newchat(chatid,v){	
			this.newtime = 0; //重置消息时间
			var that = this;
			var tochatid = chatid;
			if(chatid>this.myuid) var chatid = chatid+this.myuid;
			else var chatid = this.myuid+chatid;
			var chatidurl = "./api/chat/"+chatid+".json";
			
			axios.get(chatidurl,{}).then(function(resp) {
			    var data = resp.data;
			    if(data){
					Object.values(data).forEach((value, index, array) => {
						if (index === array.length - 1) {
							//列表消息预览
							var time = that.ifnowday(value.time);
							let msg = value.msg.length > 35 ? value.msg.substring(0, 35) + '...' : value.msg;
							if(v!='post')
							that.chatlist = that.chatlist+'<div class="'+tochatid+'" id="chat'+tochatid+'"> <img src="./img/'+tochatid+'.png"/> <div class="chat-user-info"> <h3>'+tochatid+'</h3> <div class="chat-user-msg-ps"><li class="chat-user-msg-ps-msg">'+msg+'</li> <li class="chat-user-msg-ps-time">'+time+'</li> </div> </div> </div>';
						} 
						that.addnewchatinfo(value,tochatid);
					});
				}else alert("服务器请求错误！");
			});
			
		},
		ifnowday(iftime,timetype){
			const newtime = new Date(iftime);
			const time = new Date();
			const istime = newtime.getFullYear() === time.getFullYear() &&
						   newtime.getMonth() === time.getMonth() &&
						   newtime.getDate() === time.getDate();
			var month = (newtime.getMonth() + 1);
			if (istime) return newtime.getHours()+':'+newtime.getMinutes();
			else{		//显示方法 M/D H:M
				if(timetype==2) return (newtime.getFullYear()+'/'+month+'/'+newtime.getDate() +' '+ newtime.getHours()+':'+newtime.getMinutes());
				else return (month+'/'+newtime.getDate());
			} 
			
		},addnewchatinfo(newdata,touid){
			//console.log(newdata);
			var chatinfo = '';
			// this.chatinfo[touid] = '';
			if(newdata.type=="text"){	//文本消息 
			
				if(((new Date(newdata.time) - this.newtime) / (1000 * 60) > 5)){
					 //消息时间为今天只显示时分
					var time = this.ifnowday(newdata.time,2);
					var chatinfo = '<div class="time-info"> <tt>'+time+'</tt> </div>';
					this.newtime = new Date(newdata.time);	//消息时间5分钟内省略显示时间
				}
				
				
				if(newdata.uid==this.myuid) //判断对方还是我的消息
					var chatinfo = chatinfo+'<div class="my-chat-info"><div class="chat-info"> <div class="chat-info-type-text"><p>'+newdata.msg+'</p></div></div><div class="user-qq"> <img src="./img/'+this.myuid+'.png"/></div></div>';
				else  var chatinfo = chatinfo+'<div class="to-chat-info"> <div class="user-qq"> <img src="./img/'+touid+'.png"/></div><div class="chat-info"><div class="chat-info-type-text"><p>'+newdata.msg+'</p></div></div></div>';
				
				this.chatinfo[touid] = this.chatinfo[touid] + chatinfo;
			
				this.nowchat = this.chatinfo[this.nowchatid]+'<div id="maodian"></div>';
				
				this.nowchat = this.nowchat+'<div id="maodian"></div>';
				this.exitbottom();
			}else if(newdata.type=="system"){
				
			}else{
				
			}
		},handleClick(event) {  //监听点击事件，选择哪一个聊天
			const target = event.target;  
			if (target.nodeType === Node.ELEMENT_NODE) {  
			    const className = target.className;  
				this.nowchatid = className;
			    this.nowchat = this.chatinfo[className];  
			}
		}, playMessageSound() {  
		  this.$refs.messageSound.play().then(() => {
		        this.isPlaying = true; // 播放
		      }).catch(error => {  });  
		},onSoundEnded() {  
			  this.isPlaying = false;  
			  
		},postchatinfo(){
			if(!this.infomsg) alert("请输入聊天信息！");
			var chatinfo = this.infomsg;
			this.infomsg='';
			var that = this;
			var postchaturl = "./api/adds.php";
			axios.post(postchaturl,{
				"myuid":that.myuid,
				"myqqnum":that.myqqnum,
				"touid":that.nowchatid,
				"chattype":"text",
				"chatmsg":chatinfo
			}).then(function(resp) {
			    var data = resp.data;
			    if(data){
					// 临时
					that.newchat(that.nowchatid,'post');
					that.exitbottom();
			    }else alert("服务器请求错误！");
			});
		},exitbottom(){
			const element = document.getElementById('maodian');  //底部
			if (element) element.scrollIntoView({ behavior: 'smooth' });
		}
 
	},
	mounted:function(){
	    this.main();
		this.myuidimg = './img/'+this.myuid+'.png';
		this.intervalId = setInterval(this.main, 3000);  
		this.playMessageSound();
	},created(){
		this.exitbottom();
	},beforeDestroy() {  
		clearInterval(this.intervalId);  
  } 
};
Vue.createApp(App).mount('#app');
</script>
</body>
<html>
